﻿<!--
-----------------------------------------------------------------------------------
<copyright file="Practice.html" company="Microsoft Corporation">
         (c) © 2016 Microsoft. All rights reserved.

</copyright>
---------------------------------------------------------------------------------
-->

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/vader/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="CSS/StaticPages.css" />
    <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

    <title>CheckMyCode - Practice</title>
    <meta charset="utf-8" />
</head>
<body>
    <header class="header">
        <h1 class="pageHeader">Practice</h1>
        <nav role="navigation"></nav>
        <script>
            $("nav").load("LoadHTML/Navigation.html");
        </script>
    </header>
    <br />
    <main class="main" id="practiceTop">
        <div class="info">
            <h2 class="sectionHeader">Introduction</h2>
            <p class="infoText">
                Welcome to the Practice page! Pick a problem and try to solve it. The problems
                are in bold. There are hints available if you’re stuck, but try multiple times
                before you use them. Once you’ve solved the problem, read through your own code
                to make sure that it works the way you want it to, or you can check it using the 
                IDE! You can check your answer against the example solution to see one way that 
                the problem was solved. You are encouraged to take what you have created and make
                it better. For example, accepting user input.
            </p>
        </div>
        <div class="info">
            <h2 class="sectionHeader">Skip to problems</h2>
            <ul class="skipToLinks">
                <li><a href="#practice1">Practice 1</a></li>
                <li><a href="#practice2">Practice 2</a></li>
                <li><a href="#practice3">Practice 3</a></li>
            </ul>
        </div>
        <div class="practice" id="practice1">
            <h2 class="sectionHeader">Practice 1</h2>
            <div></div>
            <script>
                $("#practice1 div").load("Practice/1.html");
            </script>
        </div>
        <div class="practice" id="practice2">
            <h2 class="sectionHeader">Practice 2</h2>
            <div></div>
            <script>
                $("#practice2 div").load("Practice/2.html");
            </script>
        </div>
        <div class="practice" id="practice3">
            <h2 class="sectionHeader">Practice 3</h2>
            <div></div>
            <script>
                $("#practice3 div").load("Practice/3.html");
            </script>
        </div>
    </main>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".practiceAccordion")
            .accordion({
                collapsible: true,
                active: false,
                beforeActivate: function (event, ui) {
                    // The accordion believes a panel is being opened
                    if (ui.newHeader[0]) {
                        var currHeader = ui.newHeader;
                        var currContent = currHeader.next('.ui-accordion-content');
                        // The accordion believes a panel is being closed
                    } else {
                        var currHeader = ui.oldHeader;
                        var currContent = currHeader.next('.ui-accordion-content');
                    }
                    // Since we've changed the default behavior, this detects the actual status
                    var isPanelSelected = currHeader.attr('aria-selected') == 'true';

                    // Toggle the panel's header
                    currHeader.toggleClass('ui-corner-all', isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top', !isPanelSelected).attr('aria-selected', ((!isPanelSelected).toString()));

                    // Toggle the panel's icon
                    currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e', isPanelSelected).toggleClass('ui-icon-triangle-1-s', !isPanelSelected);

                    // Toggle the panel's content
                    currContent.toggleClass('accordion-content-active', !isPanelSelected)
                    if (isPanelSelected) { currContent.slideUp(); } else { currContent.slideDown(); }

                    return false; // Cancels the default action
                }
            })
        });
    </script>
    <br />
    <footer role="contentinfo">
        <script>
            $("footer").load("LoadHTML/Footer.html");
        </script>
    </footer>
</body>
</html>
